<template>
  <a-table
    :columns="columns"
    :data-source="dataset"
    :pagination="false"
    :scroll="{ x: 186 * columns.length, y: 300 }"
  >
    <template v-for="col in columns" :slot="col.key">
      <div :key="col.key">
        <a-tooltip>
          <template slot="title">
            {{ col.key }}
          </template>
          <span class="text-ellipsis">{{ col.key }}</span>
        </a-tooltip>
        <strong class="col-type">({{ transformColumnType(col.type) }})</strong>
      </div>
    </template>
  </a-table>
</template>

<script lang="ts">
/**
 * preview of single dataset
 * @author Huihua Lu
 */
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component
export default class DataPreviewTable extends Vue {
  @Prop() head!: Array<any>

  @Prop() data!: Array<any>

  public get columns() {
    const result: Array<any> = []
    if (this.head) {
      this.head.forEach((item: any) => {
        result.push({
          dataIndex: item.name,
          key: item.name,
          type: item.type,
          slots: { title: item.name },
        })
      })
    }
    return result
  }

  public get dataset() {
    const result: Array<any> = []
    if (this.data) {
      this.data.forEach((item: any, index: number) => {
        result.push({
          key: index.toString(),
          ...item,
        })
      })
    }
    return result
  }

  private transformColumnType(type: string) {
    switch (type) {
      case 'varchar':
        return '字符串'
      case 'date':
        return '日期'
      case 'int':
        return '整数'
      case 'decimal':
        return '小数'
      case 'text':
        return '文本'
      default:
        return '不知名类型'
    }
  }
}
</script>

<style lang="less" scoped>
.type-select {
  margin-left: 10px;
  width: 100px;
}

// 表头
/deep/ .ant-table-header {
  .ant-table-row-cell-break-word {
    padding: 11px 16px;

    .ant-table-header-column {
      line-height: 24px;
    }
  }

  .ant-table-thead > tr > th {
    padding: 11px 16px;
  }
}

/deep/ .ant-table-tbody > tr > td {
  padding: 8px 16px;
}

.col-type {
  margin-left: 10px;
}

.text-ellipsis {
  display: inline-block;
  max-width: 186px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}
</style>
